<template>
  <el-dialog
    :title="dialogTitle"
    v-model="dialogVisible"
    width="1100px"
    :close-on-click-modal="false"
    destroy-on-close
    @open="handleOpen"
    :before-close="handleClose"
  >
    <el-divider class="zdy-divider" />
    <div class="auditSituationBox">
      <div class="as-info">
        <el-row>
          <el-col :span="6">
            <span class="as-i-txt">审批申请号：</span>
            <span class="as-i-val">{{ fillreportForm.applicationNo }}</span>
          </el-col>
          <el-col :span="6">
            <span class="as-i-txt">申请人：</span>
            <span class="as-i-val">{{ fillreportForm.applicant }}</span>
          </el-col>
          <el-col :span="6">
            <span class="as-i-txt">申请机构：</span>
            <span class="as-i-val"></span>
          </el-col>
          <el-col :span="6">
            <span class="as-i-txt">申请时间：</span>
            <span class="as-i-val">{{ fillreportForm.createdAt }}</span>
          </el-col>
          <el-col :span="6" v-if="dialogType == '2' || dialogType == '3'">
            <span class="as-i-txt">审批状态：</span>
            <span class="as-i-val as-i-color-blue" v-if="fillreportForm.status == '2'">待审批</span>
            <span class="as-i-val as-i-color-green" v-else-if="fillreportForm.status == '3'">审核通过</span>
            <span class="as-i-val as-i-color-red" v-else-if="fillreportForm.status == '0'">审批驳回</span>
            <span class="as-i-val as-i-color-grey" v-else-if="fillreportForm.status == '4'">作废</span>
            <span class="as-i-val as-i-color-red" v-else>审批驳回</span>
          </el-col>
          <el-col :span="6" v-if="dialogType == '2' || dialogType == '3'">
            <span class="as-i-txt">当前审批人：</span>
            <span class="as-i-val">{{ fillreportForm.approver }}</span>
          </el-col>
          <el-col :span="6" v-if="dialogType == '2' || dialogType == '3'">
            <span class="as-i-txt">审批时间：</span>
            <span class="as-i-val">{{ fillreportForm.approvalAt }}</span>
          </el-col>
        </el-row>
      </div>
      <div class="as-tool">
        <div class="as-tool-left as-tool-item">
          <span>本次共提交{{ fillreportForm.quantity }}个指标审批</span>
        </div>
        <div class="as-tool-right as-tool-item" v-if="dialogType == '1'">
          <el-button size="mini" type="primary" plain>预览</el-button>
        </div>
      </div>
      <div class="as-table">
        <el-table :data="tableList" border style="width: 100%" height="300px">
          <el-table-column type="index" width="60" label="序号" align="center" />
          <el-table-column prop="fieldName" label="指标名称" min-width="100" align="left" />
          <el-table-column prop="parentTargetName" label="上一级指标名称" min-width="100" align="left" />
          <el-table-column prop="childName" label="子版块名称" min-width="100" align="left" />
          <!-- <el-table-column prop="presentValue" label="提交值"  min-width="100"  align="left" /> -->
          <el-table-column prop="newValue" label="提交值" min-width="100" align="left">
            <template #default="{ row }">
              <span>{{
                row.fieldName === "数据源" && row.newValue === "1"
                  ? "填报"
                  : row.fieldName === "数据源" && row.newValue === "2"
                    ? "链接"
                    : row.fieldName === "预警指标" && row.newValue === "0"
                      ? "否"
                      : row.fieldName === "预警指标" && row.newValue === "1"
                        ? "是"
                        : row.newValue
              }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="isAlertIndicator" label="预警指标" min-width="100" align="left">
            <template #default="scope">
              <span v-if="scope.row.isAlertIndicator == '1'">是</span>
              <span v-else-if="scope.row.isAlertIndicator == '0'">否</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="as-desc" v-if="dialogType == '2' || dialogType == '3'">
        <div class="as-desc-txt"><span>审批备注</span></div>
        <div class="as-desc-val">
          <span>{{ fillreportForm.reason }}</span>
        </div>
      </div>

      <div class="as-desc" v-if="(dialogType == '2' || dialogType == '3') && fillreportForm.status == '0'">
        <div class="as-desc-txt"><span>驳回备注</span></div>
        <div class="as-desc-val">
          <span>{{ fillreportForm.approvalComment }}</span>
        </div>
      </div>

      <div class="as-desc" v-if="dialogType == '1'">
        <div class="as-desc-txt"><span>审批备注</span></div>
        <div class="as-desc-textarea">
          <el-input
            v-model="fillreportForm.reason"
            style="width: 100%"
            :autosize="{ minRows: 2, maxRows: 4 }"
            type="textarea"
            placeholder="请输入审批备注"
          />
        </div>
      </div>
    </div>

    <el-divider class="zdy-divider" />
    <span slot="footer" class="dialog-footer">
      <div v-if="dialogType == '1'">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSubmit">提交</el-button>
      </div>

      <div v-if="dialogType == '2'">
        <!-- <el-button type="warning" plain v-if="fillreportForm.status == '2'" @click="revokeWay">撤回</el-button> -->

        <el-button type="primary" v-if="fillreportForm.status == '2'" @click="auditPassWay">审批通过</el-button>
        <el-button v-if="fillreportForm.status == '2'" @click="handleClose">取消</el-button>
        <el-button type="danger" v-if="fillreportForm.status == '2'" @click="passRejectWay">审批驳回</el-button>

        <el-button type="primary" v-if="fillreportForm.status != '2'" @click="handleClose">确定</el-button>
      </div>

      <div v-if="dialogType == '3'">
        <el-button type="primary" v-if="fillreportForm.status == '2'" @click="revokeWay">撤回</el-button>
        <el-button v-if="fillreportForm.status == '2'" @click="handleClose">取消</el-button>
        <el-button type="primary" v-if="fillreportForm.status != '2'" @click="handleClose">确定</el-button>
      </div>
    </span>
  </el-dialog>
</template>

<script setup>
import { ref, computed, nextTick, reactive } from "vue"
import { ElMessage, ElMessageBox } from "element-plus"
import { assign } from "lodash-es"
import { revokeInvalid, submitApply } from "../../../api/datamanage/fillreport"
import { audits } from "../../../api/datamanage/dataReview"
//   import { } from "@/api/datamanage/fillreport.js"

// 定义 emits
const emit = defineEmits(["update:visible", "updateList"])

// 定义 props
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  rowData: {
    type: Object,
    default: {}
  },
  dialogType: {
    type: String,
    default: 1
    //   1 审批  2 审核   3 详情
  },
  title: {
    type: String,
    default: ""
  }
})

const dialogTitle = computed(() => props.title)

const dialogVisible = computed({
  get: () => props.visible,
  set: (val) => {
    // 修改为正确的变量名
    emit("update:visible", val)
  }
})
const fillreportFormRef = ref(null) // 定义表单引用
const fillreportForm = ref({})

// 审批备注数据
const approvalRemarks = ref("")

const tableList = ref([])

// 关闭
const handleClose = () => {
  emit("update:visible", false)
}
// 提交
const handleSubmit = async () => {
  await submitApply(fillreportForm.value)
  console.log(fillreportForm.value, 3333)
  ElMessageBox.alert(`已成功提交${fillreportForm.value.quantity}个指标审核，请耐心等待审核`, "提交成功", {
    confirmButtonText: "确定",
    type: "success",
    callback: () => {
      dialogVisible.value = false
      emit("updateList")
    }
  })

  //   ElMessageBox.alert(
  //     `提交失败： 未知错误`,
  //     '操作失败',
  //     { confirmButtonText: '确定', type: 'error' }
  //   )
}
// 撤回
function revokeWay() {
  ElMessageBox.confirm("是否确认撤回该审批？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(async () => {
      try {
        await revokeInvalid({
          applicationId: fillreportForm.value.id,
          applicationNo: fillreportForm.value.applicationNo,
          status: "4"
        })
        ElMessageBox.alert(`<strong>已成功撤回指标审核</strong><br/>可查看草稿状态指标继续编辑`, "审批申请撤回成功", {
          confirmButtonText: "确定",
          type: "success",
          dangerouslyUseHTMLString: true // 必须开启才能解析HTML
        }).then(() => {
          dialogVisible.value = false
          emit("updateList")
        })
      } catch (err) {
        ElMessageBox.alert(
          `<strong>审批申请撤回失败，请重新撤回</strong><br/>撤回失败原因：${err}`,
          "审批申请撤销失败",
          {
            confirmButtonText: "确定",
            type: "error",
            dangerouslyUseHTMLString: true // 必须开启才能解析HTML
          }
        )
      }
    })
    .catch(() => {})
}
// 审批通过
function auditPassWay() {
  ElMessageBox.confirm("是否确认通过该审批？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(async () => {
      await audits({
        applicationId: fillreportForm.value.id,
        applicationNo: fillreportForm.value.applicationNo,
        status: "3"
      })
      // 用户点击了确定
      ElMessage({
        type: "success",
        message: "审批通过成功！"
      })
      dialogVisible.value = false
      emit("updateList")
    })
    .catch(() => {
      // 用户点击了取消
    })
}
// 审批驳回
function passRejectWay() {
  ElMessageBox.prompt("请输入驳回原因", "审批驳回", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    inputType: "textarea",
    type: "warning"
  }).then(async ({ value }) => {
    await audits({
      applicationId: fillreportForm.value.id,
      applicationNo: fillreportForm.value.applicationNo,
      approvalComment: value || "",
      status: "0"
    })
    ElMessage.error(`已驳回`)
    dialogVisible.value = false
    emit("updateList")
  })
}

async function handleOpen() {
  assign(fillreportForm.value, props.rowData)
  tableList.value = fillreportForm.value.detailed
}
</script>

<style lang="scss" scoped>
.auditSituationBox {
  width: 100%;
  height: 100%;
  .as-info {
    width: 100%;
    height: auto;
    min-height: 35px;
    line-height: 35px;
    box-sizing: border-box;
    .as-i-txt {
      font-family:
        Microsoft YaHei,
        Microsoft YaHei;
      font-weight: 400;
      font-size: 14px;
      color: #666666;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }

    .as-i-val {
      font-family:
        Microsoft YaHei,
        Microsoft YaHei;
      font-weight: 600;
      font-size: 14px;
      color: #333333;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
    .as-i-color-green {
      color: #52c41a;
    }
    .as-i-color-blue {
      color: #0c7cff;
    }
    .as-i-color-red {
      color: #ff4d4f;
    }
    .as-i-color-grey {
      color: #999999;
    }
  }
  .as-tool {
    width: 100%;
    height: 30px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    .as-tool-item {
      width: auto;
      height: 100%;
      display: flex;
      align-items: flex-end;
    }
    .as-tool-item-left {
      justify-content: flex-start;
    }
    .as-tool-item-right {
      justify-content: flex-end;
    }
  }
  .as-desc {
    width: 100%;
    height: auto;
    min-height: 30px;
    .as-desc-txt {
      width: 100%;
      height: 30px;
      line-height: 30px;
      span {
        font-family:
          Microsoft YaHei,
          Microsoft YaHei;
        font-weight: 400;
        font-size: 14px;
        color: #666666;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }
    }
    .as-desc-val {
      width: 100%;
      min-height: 30px;
      line-height: 22px;
      font-family:
        Microsoft YaHei,
        Microsoft YaHei;
      font-weight: 600;
      font-size: 14px;
      color: #333333;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
    .as-desc-textarea {
    }
  }

  .as-table {
    width: 100%;
    height: auto;
    ::v-deep .el-table {
      .el-table__header-wrapper {
        th {
          background-color: #f5f9fc !important;
          color: #333333;
        }
      }
      .el-table__body-wrapper {
        td {
          color: #333333;
        }
      }
    }
  }
}

.zdy-divider {
  margin: 10px 0;
  border-color: #e9e9e9;
}
.dialog-footer {
  text-align: right;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style>
